<!--
* @description 隐患整改
* @author zywu
* @date 2021/01/09 10:50:49
!-->
<template>
  <div class="hiddenCheck-content">
    <div class="content-top-title">
      <p class="title-text">隐患整改回顾</p>
      <p class="title-desc">“隐患险于明火，防范胜于救灾！”</p>
    </div>
    <div class="statistics-quantity statistics-two white-bg">
      <div>
        <div class="statistics-number">
          <span>{{hiddenDangerReform.total}}</span>
          <p>提报隐患</p>
        </div>
        <div class="statistics-Allnumber">
          <span style="color: rgb(250, 124, 90);">{{hiddenDangerReform.maxLevel}}</span>
          <p>较大及以上</p>
        </div>
      </div>
    </div>
    <div class="hiddenCheck-chart">
      <div id="hiddenCheckChart"></div>
      <div class="hiddenCheck-chart-info">
        <div>
          <span id="percentageRealNum">{{percentageNum}}</span>
          <span>%</span>
        </div>
        <div>较大及以上</div>
      </div>
    </div>
    <div v-if="showDetail" class="hiddenCheck-detail">
      <div v-if="showMax" class="hiddenCheck-detail-item">
        <p class="item-tilte">本{{periodName}}隐患提报最多的社会单位</p>
        <p class="item-desc">{{hiddenDangerReform.maxOrgName}}，总计提报{{hiddenDangerReform.maxNumber}}次</p>
      </div>
      <div v-if="showMax2" class="hiddenCheck-detail-item">
        <p class="item-tilte">本{{periodName}}没有提报隐患的社会单位</p>
        <p class="item-desc">共有{{hiddenDangerReform.notHiddenDangerOrgNumber}}家，包括{{noDangerOrgNames}}</p>
      </div>
    </div>
    <div v-if="picList.length>0" class="duty-detail-picture duty-detail-picture-hidden">
      <div class="content-detail-title">
        <img
          src="/ilink-app-h5-zd/static/img/ilink_1565765076954.png"
          style="vertical-align:middle;width:25px;height:25px;margin-top: -5px;"
        />典型隐患照片
      </div>
      <div :class="{ 'only-one':picList.length==1 }" class="pic-item" id="hiddenCheckPic">
        <img
          v-for="(item,i) in picList"
          :key="item+i"
          :src="item"
          :onerror="'hideDangerImgError('+i+')'"
          @click="handlePreview(i)"
          :style="(i+1)%3==0?'margin-right:0;':''"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'
const defaultImg = require('@/assets/img/common/emptySrc.png')

export default {
  props: {
    reportData: {
      type: Object,
      default: function () {
        return {}
      },
    },
    period: {
      type: [Number, String],
      default: '',
    },
    periodName: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      hiddenDangerReform: {},
      percentageNum: 0,
      noDangerOrgNames: '',
      showMax: true,
      showMax2: true,
      showDetail: true,
      picList: [],
    }
  },

  components: {},

  computed: {},

  created() {
    window.hideDangerImgError = this.onImgError

    var hiddenDangerReform = this.reportData.hiddenDangerReform
    this.hiddenDangerReform = hiddenDangerReform
    var total = hiddenDangerReform.total
    let percentageNum = 0
    if (total != 0) {
      percentageNum = (hiddenDangerReform.maxLevel / total).toFixed(2) * 100
      percentageNum = Math.round(percentageNum)
    }
    this.percentageNum=percentageNum

    var maxOrgName = hiddenDangerReform.maxOrgName
    var notHiddenDangerOrgName = hiddenDangerReform.notHiddenDangerOrgName
    this.showDetail = maxOrgName && notHiddenDangerOrgName
    if (maxOrgName != '' && notHiddenDangerOrgName != '') {
      var noOrgNameList = notHiddenDangerOrgName.split(',')
      var length = hiddenDangerReform.notHiddenDangerOrgNumber
      var str = ''
      for (var m = 0; m < length; m++) {
        str += noOrgNameList[m] + '、'
      }
      if (str != '') {
        str = str.substring(0, str.length - 1)
      }
      this.noDangerOrgNames = str
    } else if (maxOrgName == '' && notHiddenDangerOrgName != '') {
      this.showMax = false
      var noOrgNameList = notHiddenDangerOrgName.split(',')
      var length = hiddenDangerReform.notHiddenDangerOrgNumber
      var str = ''
      for (var m = 0; m < length; m++) {
        str += '【' + noOrgNameList[m] + '】、'
      }
      this.noDangerOrgNames = str
    } else if (maxOrgName != '' && notHiddenDangerOrgName == '') {
      this.showMax2 = false
    }

    if (hiddenDangerReform.hiddenDangerPics) {
      this.picList = hiddenDangerReform.hiddenDangerPics.split(',').splice(0, 9)
    }
  },

  mounted() {
    this.hiddenCheckChart(this.hiddenDangerReform.maxLevel)
  },

  methods: {
    onImgError(i) {
      this.$set(this.picList, i, defaultImg)
    },
    handlePreview(i) {
      ImagePreview({
        images: this.picList,
        startPosition: i,
      })
    },
    hiddenCheckChart(value) {
      var dom = document.getElementById('hiddenCheckChart')
      var myChart = echarts.init(dom)
      var option = {
        color: ['#FA7B59', '#F1F1F1'],
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['50%', '60%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center',
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold',
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: value,
                name: '',
              },
              {
                value: this.hiddenDangerReform.total==0?1:this.hiddenDangerReform.total - value,
                name: '',
              },
            ],
          },
        ],
      }
      myChart.setOption(option, true)
    },
  },
}
</script>
<style lang='scss'>
</style>